<template>
    <div class="main-content">
        <div class="search between">
            <div class="query">
                <el-input style="width: 180px;" placeholder="名称" v-model="params.name" clearable @change="getTable"></el-input>
                <el-select style="width: 180px;" v-model="params.state" placeholder="状态" clearable  @change="getTable">
                    <el-option :value="1" label="启用"></el-option>
                    <el-option :value="2" label="禁用"></el-option>
                </el-select>
            </div>
            <div class="set-group">
                <el-button @click="add" type="primary">新增</el-button>
                <el-button @click="upState" type="warning">批量启用</el-button>
                <el-button @click="downState" type="warning">批量禁用</el-button>
                <el-button class="ico-button" @click="refresh">
                    <el-icon>
                        <Refresh />
                    </el-icon>
                </el-button>
            </div>
        </div>
        <div class="table">
            <div class="table-main">
                <el-table :data="table.data" resizable border show-overflow-tooltip max-height="100%" height="100%"
                    v-loading="table.load" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" />
                    <template v-for="row in table.column">
                        <el-table-column :label="row.label" :prop="row.key" :width="row.width" :align="row.align"
                            :fixed="row.fixed">
                            <template #default="scope">
                                <span v-if="row.key == 'img'">
                                    <img :src="$imgUrl + scope.row[row.key]" style="width:50px;height:50px"
                                        alt="">
                                </span>
                                <span v-else-if="row.key == 'state'">
                                    <el-tag type="success" v-if="scope.row[row.key] == 1" @click="changeState(scope.row)">启用</el-tag>
                                    <el-tag type="danger" v-if="scope.row[row.key] == 2" @click="changeState(scope.row)">禁用</el-tag>
                                </span>
                                <span v-else>
                                    {{ scope.row[row.key] }}
                                </span>
                            </template>
                        </el-table-column>
                    </template>
                    <el-table-column label="相关操作" column-key="handle" width="120" align="center" fixed="right">
                        <template #default="scope">
                            <el-button-group>
                                <el-button link type="primary" @click="edit(scope.row)" >编辑</el-button>
                                <el-popconfirm popper-class="limit-popper" title="确定要删除吗?" @confirm="del(scope.row)" >
                                    <template #reference>
                                        <el-button link type="danger">删除</el-button>
                                    </template>
                                </el-popconfirm>
                            </el-button-group>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page">
                <el-pagination v-model:current-page="pages.page" v-model:page-size="pages.page_size"
                    :page-sizes="[30, 50, 100, 200, 300, 500]" :small="true" :background="true"
                    layout="total, sizes, prev, pager, next" :total="pages.count" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>
<script setup name="BrandList">
// 商品模块——品牌管理
const { proxy } = getCurrentInstance()
// 表格字段配置 start
const table = reactive({
    load: false,
    column: [
        { label: 'ID', key: 'id', width: '100', show: true, align: 'center' },
        { label: '图片', key: 'img', width: '80', show: true, align: 'center' },
        { label: '名称', key: 'name', width: 'auto', show: true, align: 'center' },
        { label: '状态', key: 'state', width: '120', show: true, align: 'center' },
        { label: '排序', key: 'sort', width: '120', show: true, align: 'center' },
        { label: '描述', key: 'desc', width: 'auto', show: true, align: 'center' },
    ],
    data: []
})
// 表格字段配置 end 

onMounted(() => {
    getTable()
})

// 页面数据 start
const params = reactive({
    name: '',
    state: ''
})
const pages = reactive({
    page: 1,
    page_size: 30,
    count: 0
})

function handleSizeChange(val) {
    pages.page_size = val
    getTable()
}
function handleCurrentChange(val) {
    pages.page = val
    getTable()
}
function refresh() {
    pages.page = 1
    getTable()
}
async function getTable() {
    table.load = true
    let res = await proxy.$get('GoodsBrandList', {
        page: pages.page,
        page_size: pages.page_size,
        ...params
    }, false)
    table.load = false
    if (res.code === 0) {
        table.data = res.data.list || []
        pages.count = res.data.total ? Number(res.data.total) : 0
    }
}

// 页面数据 end

// 增删改 start
function add() {
    proxy.$bus.emit('tabSwitch', 'GoodsBrandDetail');
}
function edit(row) {
    proxy.$bus.emit('tabSwitch', { key: 'GoodsBrandDetail', query: { id: row.id } });
}
async function del(row) {
    let res = await proxy.$post('GoodsBrandDel', {
        id: row.id
    })
    if (res.code === 0) {
        ElMessage({
            type: 'success',
            message: '删除成功'
        });
        getTable()
    }
}
// 增删改 end


// 切换状态——上下架
async function changeState(row, id='') {
   let res = await proxy.$post('GoodsToggleState', {
        id: id? id: [row.id],
        state: row.state == 1 ? 2 : 1
    }, false)
    if(res.code ==0) {
        getTable()
    }
}

// 选中的行数据
const active_row = ref([])
function handleSelectionChange(row) {
    active_row.value = row
}

function upState() {
    let ids = active_row.value.map(item=> item.id)
    if(ids.length == 0){
        return  ElMessage({
            type: 'error',
            message: '请选择'
        });
    }
    changeState({
        state: 2
    }, ids)
}
function downState() {
    let ids = active_row.value.map(item=> item.id)
    if(ids.length == 0){
        return  ElMessage({
            type: 'error',
            message: '请选择'
        });
    }
    changeState({
        state: 1
    }, ids)
}
</script>
<style scoped>
.read-the-docs {
    color: #888;
}
</style>